import React,{Component} from 'react';
import {Platform, StyleSheet,ScrollView,Text, View,TouchableOpacity, Alert,Image } from 'react-native';
import ScrollableTabView, {DefaultTabBar,ScrollableTabBar} from 'react-native-scrollable-tab-view';

export default class attendance extends Component{
    static navigationOptions = {
        headerStyle:{
            backgroundColor:'#d04542',
            height:50,
        },
        headerTintColor:'white',
    };
	Scrollable() {
        return (
            <ScrollableTabView 
				renderTabBar={()=> <DefaultTabBar />}
				tabBarBackgroundColor='#fff'
				tabBarActiveTextColor='#D04542'
				tabBarInactiveTextColor='#453C34'
				tabBarUnderlineStyle={styles.lineStyle}
				tabBarTextStyle={{fontSize: 18}} >
	            <ScrollView tabLabel='我的活动'>
	            	<View style={styles.titles}>
			        	<TouchableOpacity style={styles.titleLeft}>
				      		<Text style={styles.titleLeftText}>关于开党的女大当嫁撒的撒是的撒 </Text>
				    	</TouchableOpacity>
				      	<Text style={styles.titleRightText}>2018-10-10 </Text>
				    </View>
				    <View style={styles.titles}>
			        	<TouchableOpacity style={styles.titleLeft}>
				      		<Text style={styles.titleLeftText}>关于开党的女大当嫁撒的撒是的撒 </Text>
				    	</TouchableOpacity>
				      	<Text style={styles.titleRightText}>2018-10-10 </Text>
				    </View>
				    <View style={styles.titles}>
			        	<TouchableOpacity style={styles.titleLeft}>
				      		<Text style={styles.titleLeftText}>关于开党的女大当嫁撒的撒是的撒 </Text>
				    	</TouchableOpacity>
				      	<Text style={styles.titleRightText}>2018-10-10 </Text>
				    </View>
				    <View style={styles.titles}>
			        	<TouchableOpacity style={styles.titleLeft}>
				      		<Text style={styles.titleLeftText}>关于开党的女大当嫁撒的撒是的撒 </Text>
				    	</TouchableOpacity>
				      	<Text style={styles.titleRightText}>2018-10-10 </Text>
				    </View>
				    <View style={styles.titles}>
			        	<TouchableOpacity style={styles.titleLeft}>
				      		<Text style={styles.titleLeftText}>关于开党的女大当嫁撒的撒是的撒 </Text>
				    	</TouchableOpacity>
				      	<Text style={styles.titleRightText}>2018-10-10 </Text>
				    </View>
				    <View style={styles.titles}>
			        	<TouchableOpacity style={styles.titleLeft}>
				      		<Text style={styles.titleLeftText}>关于开党的女大当嫁撒的撒是的撒 </Text>
				    	</TouchableOpacity>
				      	<Text style={styles.titleRightText}>2018-10-10 </Text>
				    </View>
	            	
	            </ScrollView>
	            <ScrollView tabLabel='出勤活动'>
	            	<View style={styles.titles}>
			        	<TouchableOpacity style={styles.titleLeft}>
				      		<Text style={styles.titleLeftText}>关于开党的女大当嫁撒的撒是的撒 </Text>
				    	</TouchableOpacity>
				      	<Text style={styles.titleRightText}>2018-10-10 </Text>
				    </View>
				    <View style={styles.titles}>
			        	<TouchableOpacity style={styles.titleLeft}>
				      		<Text style={styles.titleLeftText}>关于开党的女大当嫁撒的撒是的撒 </Text>
				    	</TouchableOpacity>
				      	<Text style={styles.titleRightText}>2018-10-10 </Text>
				    </View>
				    <View style={styles.titles}>
			        	<TouchableOpacity style={styles.titleLeft}>
				      		<Text style={styles.titleLeftText}>关于开党的女大当嫁撒的撒是的撒 </Text>
				    	</TouchableOpacity>
				      	<Text style={styles.titleRightText}>2018-10-10 </Text>
				    </View>
	            </ScrollView>
	        </ScrollableTabView>
        );
    }
	
	render(){
		return(
		    <View style={styles.container}>
		        {this.Scrollable()}
         	</View>
		);
	}
}

const styles = StyleSheet.create({
	titleRightText:{
		fontSize: 14,lineHeight: 35,flex:1,color:"#9B9B9B",
	},
	titleLeftText:{
		fontSize: 16,lineHeight: 35,fontWeight:'bold',
	},
	titleLeft:{
		flex:3,
	},
	titles:{
		margin:10,flex: 1,justifyContent:'center', flexDirection: 'row',height:40,borderBottomWidth:1,borderBottomColor: "#D4D4D4"
	},
	lineStyle:{
		backgroundColor:'#D04542',height:2,
	},
	container: {
        flex: 1,
    },
});
